<template lang="pug">
  div#AddFriend
    div.top-header
      input.iconfont.search-input(type="text",:placeholder="placeholderText")
      span.search-cancel(@click="$router.push('/userFriends')")  取消
    div.column-title 用户
    div.friends-block
      div.friend-list(v-for="item in friendsData")
        div.friend-head
          img(:src="item.friendHead")
        div.friend-name {{item.friendName}}
        div.have-btn(v-if="item.ifFriend") 已添加
        div.add-btn(v-else) 加好友
</template>
<script>
  export default {
    data() {
      return {
        placeholderText: '\ue60b 请输入用户名或好友昵称',
        friendsData: [{
          friendHead: require('@/assets/userFriends/userHead.png'),
          friendName: '发条音乐人',
          ifFriend: true
        }, {
          friendHead: require('@/assets/userFriends/userHead.png'),
          friendName: '超超',
          ifFriend: false
        }, {
          friendHead: require('@/assets/userFriends/userHead.png'),
          friendName: '铁皮人',
          ifFriend: false
        }]
      }
    }
  }
</script>
<style scoped lang="less">
  #AddFriend {
    .top-header {
      position: relative;
      .search-input {
        position: absolute;
        width: calc(100% - 90px);
        height: 25px;
        background: #f5f5f5;
        top: 12.5px;
        border: none;
        left: 20px;
        text-indent: 10px;
        outline: none;
        font-size: 12px;
        color: #9c9c9c;
      }
      .search-cancel {
        position: absolute;
        right: 20px;
      }
    }
    .column-title {
      text-align: left;
      padding: 15px 20px 8px 20px;
      color: #9c9c9c;
    }
    .friends-block {
      margin-top: 5px;
      .friend-list {
        overflow: hidden;
        padding: 10px 20px;
        background: #fff;
        border-bottom: 1px solid #f5f5f5;
        .friend-head {
          height: 30px;
          width: 30px;
          float: left;
        }
        .friend-name {
          font-size: 14px;
          float: left;
          line-height: 30px;
          margin-left: 10px;
        }
        .have-btn, .add-btn {
          height: 20px;
          width: 50px;
          background: #080c15;
          color: #fff;
          float: right;
          font-size: 12px;
          line-height: 20px;
          margin-top: 5px;
        }
        .have-btn {
          background: #9c9c9c;
        }
      }
    }
  }
</style>
